<template>
  <div>
    <!-- header -->
    <div
      class="fixed top-0 left-0 right-0 z-4 h-60px flex items-center justify-between p-x-30px bg-white shadow"
    >
      <div class="flex items-center">
        <span class="iconfont icon-bilibili1 c-#00a1d6 text-30px"></span>
        <span
          class="iconfont icon-wenzi-chuangzuozhongxin c-#00a1d6 text-22px m-l-5px"
        ></span>
        <div @click="router.push('/')" class="cursor-pointer">
          <span
            class="iconfont icon-bilibili-line c-#757575 m-l-20px text-18px v-text-bottom m-r-6px"
          ></span>
          <span class="c-#757575 text-16px">主站</span>
        </div>
      </div>

      <div class="flex items-center gap-x-20px">
        <img
          :src="userStore.userInfo.userVo.avatar || defultAvatar"
          class="w-35px h-35px rounded-full"
        />
        <span
          class="text-14px c-#fa8e57 p-x-10px bg-[rgba(250,142,78,0.1)] b-rd-14px text-center inline-block leading-24px b b-solid b-[rgba(250,142,78,0.43)]"
        >
          成为UP主的第{{ userStore.userInfo.registerDayCount }}天

          <span class="iconfont icon-jiantou2 v-end"></span>
        </span>

        <div class="h-26px b-r b-r-solid b-r-#e1e2e5 m-x-20px"></div>

        <span
          class="iconfont icon-xiaoxi c-#757575 v-mid inline-block leading-60px"
        ></span>
        <span
          class="iconfont icon-xiazai c-#757575 v-end inline-block leading-60px"
        ></span>
      </div>
    </div>

    <!-- content -->
    <div class="flex">
      <!-- 侧边栏 -->
      <el-menu
        default-active="0"
        class="h-100vh w-200px p-t-60px box-border"
        unique-opened
      >
        <!-- 投稿按钮 -->
        <el-menu-item index="-1">
          <div
            class="w-136px text-16px c-#fff bg-#00a1d6 cursor-pointer b-rd-2px text-center leading-40px m-[20px_auto] hover:bg-[rgba(0,161,214,0.8)]"
            @click="activeComponent = Submit"
          >
            <span class="iconfont icon-shangchuan upload-icon"></span>
            投稿
          </div>
        </el-menu-item>

        <template v-for="item in menuList" :key="item.index">
          <div
            v-if="item.index === '6'"
            class="w-138px b-b b-b-solid b-b-#e7e7e7 m-[8px_auto]"
          ></div>

          <el-menu-item
            v-if="!item.children"
            class="m-l-12px"
            :index="item.index"
            @click="selectMenu(item)"
          >
            <span
              :class="`iconfont ${item.icon} menu-icon  m-r-10px text-18px v-mid`"
            ></span>
            <span>{{ item.label }}</span>
          </el-menu-item>

          <el-sub-menu v-else class="m-l-12px" :index="item.index">
            <template #title>
              <span
                :class="`iconfont ${item.icon} menu-icon  m-r-10px text-18px v-mid`"
              ></span>
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item
              v-for="sub in item.children"
              :key="sub.index"
              :index="sub.index"
              @click="selectMenu(sub)"
            >
              {{ sub.label }}
            </el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>

      <!-- 内容 -->
      <component :is="activeComponent"></component>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/userStore";
import defultAvatar from "@/assets/img/home/data-head.jpg";
import { markRaw, ref, shallowRef, type Component } from "vue";
import Home from "./home/index.vue";
import Submit from "./submit/index.vue";
import router from "@/router";

const activeComponent = shallowRef<Component>(Home);

const menuList = [
  { index: "0", label: "首页", icon: "icon-shouye", component: Home },
  {
    index: "1-sub",
    label: "内容管理",
    icon: "icon-tougao1",
    children: [
      { index: "1-1", label: "稿件管理" },
      { index: "1-2", label: "申诉管理" },
      { index: "1-3", label: "字幕管理" },
    ],
  },
  { index: "2", label: "数据中心", icon: "icon-shujuzhongxin" },
  { index: "3", label: "粉丝管理", icon: "icon-fensi" },
  {
    index: "4",
    label: "互动管理",
    icon: "icon-shequzhongxin",
    children: [
      { index: "4-1", label: "评论管理" },
      { index: "4-2", label: "弹幕管理" },
    ],
  },
  {
    index: "5",
    label: "收益管理",
    icon: "icon-shouyi",
    children: [
      { index: "5-1", label: "收益中心" },
      { index: "5-2", label: "创作激励" },
      { index: "5-3", label: "充电计划" },
      { index: "5-4", label: "悬赏带货" },
      { index: "5-5", label: "任务广场" },
      { index: "5-6", label: "花火平台" },
      { index: "5-7", label: "模版激励" },
    ],
  },
  {
    index: "6",
    label: "创作成长",
    icon: "icon-creation2",
    children: [
      { index: "6-1", label: "任务成就" },
      { index: "6-2", label: "必火推广" },
      { index: "6-3", label: "创作学院" },
    ],
  },
  {
    index: "7",
    label: "创作权益",
    icon: "icon-huodong",
    children: [
      { index: "7-1", label: "版权保护" },
      { index: "7-2", label: "bilibili认证" },
      { index: "7-3", label: "音乐人服务" },
    ],
  },
  { index: "8", label: "创作实验室", icon: "icon-laboratorylab" },
  { index: "9", label: "社区公约", icon: "icon-gongyue" },
  { index: "10", label: "创作设置", icon: "icon-shezhi" },
];

const selectMenu = (sub: any) => {
  if (!sub.component) {
    ElMessage.warning("该功能正在开发中，请耐心等待~");
    return;
  }
  activeComponent.value = sub.component;
};

const userStore = useUserStore();
</script>

<style lang="less" scoped></style>
